<template>
	<div class="movie-list">
		<div class="list">
			<router-link :to="`/moviepage/${item.id}`" class="item" v-for="item in moviesinfo" :key="item.id">
				<!-- 将图片链接中的w.h替换成170.230即可访问 -->
				<div class="bg">
					<div class="default-img-bg">
						<img :src="$options.filters.src(item.img)">
					</div>
				</div>

				<div class="info">
					<div class="content">
						<div class="title">
							<span class="name">{{item.nm}}</span>
							<span :class="['icon',item.version]" v-show="item.version!=''"></span>
						</div>

						<div class="detail">
							<div class="mv-sc line-ellipsis">
								观众评
								<span class="sc">{{item.sc}}</span>
							</div>
							<div class="actor line-ellipsis">
								主演：{{item.star}}
							</div>
							<div class="show line-ellipsis">{{item.showInfo}}</div>
						</div>
					</div>

					<div class="button-block">
						<router-link :to="`/buyinfo/${item.id}`">
							<div class="btn" :style="{background:item.showStateButton.color}">
								<span>{{item.showStateButton.content}}</span>
							</div>
						</router-link>
					</div>
				</div>

			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			moviesinfo: Array,
		},
		filters: {
			src(value) {
				return value.replace('w.h', '170.230')
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="less" scoped>
	.list {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;

		.item {
			position: relative;
			padding-left: 15px;
			background-color: #fff;

			.bg {
				margin-top: 12px;
				width: 64px;
				height: 95px;
				position: relative;
				float: left;

				img {
					background-color: transparent;
					height: 90px;
				}

				&::before {
					content: "";
					display: block;
					position: absolute;
					width: 48px;
					height: 48px;
					background-repeat: no-repeat;
					background-size: contain;
				}
			}

			.info {
				padding: 12px 18px 12px 0;
				margin-left: 74px;
				height: 90px;
				max-height: 90px;
				position: relative;

				.content {
					margin-right: 48px;
					padding-right: 5px;
					overflow: hidden;
				}

				.button-block {
					position: absolute;
					right: 14px;
					top: 0;
					bottom: 0;
					height: 27px;
					margin: auto;

					.btn {
						width: 54px;
						height: 28px;
						display: flex;
						justify-content: center;
						align-items: center;
						box-sizing: border-box;
						background-color: #f03d37;
						color: #fff;
						white-space: nowrap;
						font-size: 13px;
						font-weight: 500;
						cursor: pointer;
						border-radius: 14px;
					}
				}

				.title {
					max-height: 24px;
					margin-bottom: 7px;
					line-height: 24px;
					overflow: hidden;

					.name {
						font-size: 17px;
						font-weight: 700;
						padding-right: 5px;
						flex-shrink: 1;
						color: #333;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.icon {
						background-size: contain;
						background-repeat: no-repeat;
						flex: 0 0 auto;
						margin-right: 3px;
						margin-top: 5px;
						display: inline-block;
						height: 14px;
						width: 17px;


					}

					.v2d.imax {
						width: 43px;
						background-image: url(../assets/img/v2dimax.png);
					}

					.v3d {
						background-image: url(../assets/img/v3d.png);
					}

					.pre-show {
						background-image: url(../assets/img/pre-show.png);
					}
				}

				.detail {

					div {
						color: #666;
						font-size: 13px;
					}

					div+div {
						margin-top: 6px;
						line-height: 15px;
					}


				}
			}

		}
	}

	.default-img-bg {
		background-color: #e1e1e1;
		background-size: 100% 100%;
	}

	.sc {
		font-weight: 700;
		color: #faaf00;
		font-size: 15px;
	}

	.line-ellipsis {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>
